<template>
    <div class="container" style="width: ;">
        <n-grid x-gap="12" :cols="4">
          <n-gi v-for="(item,index) in tagList" :key="index" style="margin-bottom: 10px;">
            <n-card  hoverable @click="showTagArticle(item.id)">
                <div class="flex" style="display: flex; align-items: center;">
                    <img style="width: 80px;height: 80px;" :src="item.tag_img" alt="">
                    <div style="font-size: 24px;font-weight: 600;margin-left: 15px;">{{ item.tag_name }}</div>
                </div>
            </n-card>
          </n-gi>
        </n-grid>
    </div>
  </template>
  
  <script setup lang="ts">
  import router from '@/router';
  import requestList from '@/service/request';
  import { getItem } from '@/utils/local';
  import { onMounted, ref } from 'vue';
  

  const tagList = ref<any[]>([])
  const getTagList = async () =>{
    const res = await requestList.tagListApi({all:true})
    if(res.code === 1){
        tagList.value = res.data as any
    }
  }
 




  onMounted(()=>{
    getTagList()
  })
  
  </script>
  
  <style lang="scss" scoped>
  </style>